<template>
  <div class="imgShow" style="align-items: center" :style="commpStyle" id="id" @click="(event) => imgClick(event)">
    <div v-if="localShow" class="imgContainer">
      <img v-if="imgAddress" :src="require('@/assets/img/' + imgAddress)" :style="imgStyle" /><span class="imgName">{{ imgShowObj.imgName }}</span>
    </div>
    <div v-if="base64Show" class="imgContainer">
      <img v-if="imgShowObj.imgUrl" :src="imgShowObj.imgUrl" :style="imgStyle"><span class="imgName">{{ imgShowObj.imgName }}</span>
  </div>
    <div v-if="iconShow" class="imgContainer">
      <i v-if="iconAddress" :class="iconAddress" :style="iconStyle"></i><span class="imgName">{{ imgShowObj.imgName }}</span>
    </div>

  </div>
</template>
<script>
import baseComp from "./baseComp";
// ../assets/img/low.png
export default {
  name: "imgShow",
  extends: baseComp,
  model: {
    prop: "imgShow",
    event: "imgShowChange",
  },
  props: {
    imgShow: {
      type: Object,
      default: ()=>{
        return {
          imgName: '',
          imgUrl: '',
        }
      }
    },
    myData: {
      type: Object,
      default: () => {},
    },
    requstParams: {
      type: Object,
      default: () => {},
    },
    flowRate: [Number, String],
  },
  data() {
    return {
      id: "myImgShow",
      chartView: null,
      localShow: true, //本地图片显示
      iconShow: true, //icon图片显示
      base64Show: true, //base64图片显示
      imgShowObj: { //图片显示内容
        imgName: '',
        imgUrl: '',
      },
      iconAddress: '', //icon图标class
      imgAddress: '', //本地图片url地址
      //边距设置
      padding: {},
      //流图标样式
      imgStyle: {
        width: "20px",
        height: "20px",
        marginTop: "0px",
        marginLeft: "0px",
      },
      iconStyle: {
        fontSize: "16px",
        marginTop: "0px",
        marginLeft: "0px",
      },
    };
  },
  components: {},
  created() {},
  mounted() {},
  beforeDestroy() {
  },

  watch: {
    myData: {
      handler(val) {
        this.initData();
      },
      deep: true,
      immediate: true,
    },
    requstParams: {
      handler(reqParam) {
        this.getRemoteData(reqParam);
      },
      deep: true,
      immediate: true,
    },
    imgShow: {
      handler(val){
        if(val){
          this.imgShowObj = {...val};
        }
      },
      deep: true,
      immediate: true
    }
  },
  methods: {



    /**
     * 获取远程访问数据
     */
    getRemoteData(reqParam) {
      let url = reqParam.initUrl;
      let method = reqParam.initMethod;
      if (url && method) {
        let form = this.getRequestParam();
        this.init(method, url, form);
      }
    },
    /**
     * 获取请求参数体
     * @returns {{}}
     */
    getRequestParam() {
      let requstForm = this.requstParams.initRequstForm;
      let form = {};
      if (requstForm) {
        for (let i = 0; i < requstForm.length; i++) {
          form[requstForm[i].label] = requstForm[i].value;
        }
      }
      return form;
    },

    /**
     * 初始化数据配置
     */
    initData() {
      let obj = this.myData;
      //数值
      this.imgFrom = obj.imgFrom;
      if (this.imgFrom === "local") {
        this.localShow = true;
        this.iconShow = false;
        this.base64Show = false;
      } else if(this.imgFrom == 'icon') {
        this.base64Show = false;
        this.localShow = false;
        this.iconShow = true;
      }else{
        this.base64Show = true;
        this.localShow = false;
        this.iconShow = false;
      }
      if(obj.imgAddress){
        this.imgAddress = obj.imgAddress;
      }
      if(obj.iconAddress){
        this.iconAddress = obj.iconAddress;
      }
      this.imgStyle.width = obj.imgWidth;
      this.imgStyle.height = obj.imgHeight;
      this.imgStyle.marginTop = obj.topMargin;
      this.imgStyle.marginBottom = obj.bottomMargin;
      this.imgStyle.marginLeft = obj.leftMargin;
      this.imgStyle.marginRight = obj.rightMargin;
      this.iconStyle.marginTop = obj.topMargin;
      this.iconStyle.marginBottom = obj.bottomMargin;
      this.iconStyle.marginLeft = obj.leftMargin;
      this.iconStyle.marginRight = obj.rightMargin;
      this.iconStyle.fontSize = obj.iconSize;
    },

    //***发送请求****
    getData(method, url, params) {
      try {
        return this.$myAxios.request(method, url, params).then((res) => {
          return res;
        });
      } catch (e) {
        return 0;
      }
    },
    //接口数据
    async init(method, url, requstForm) {
      if (url && url != "" && method && method != "") {
        let res = await this.getData(method, url, requstForm);
        if (res == 0) {
          this.flowRateValue = res;
          return;
        }
        let result = res.data.data.records[0].form;
        this.getDataByMapping(result);
      }
    },
    //将传入的参数--组装为一个对象
    getInitParam() {
      let objRequst = {};
      if (
        this.requstParams.initRequstForm &&
        this.requstParams.initRequstForm.length > 0
      ) {
        this.requstParams.initRequstForm.forEach((val) => {
          objRequst[val.label] = val.value;
        });
      }
      return objRequst;
    },

    //timer**
    initTimer(intervalTime) {
      this.timer = window.setInterval(() => {
        this.getRemoteData(this.requstParams);
      }, intervalTime);
    },

    imgClick(event){
      event.stopPropagation();
      this.executeEvent('imgClick',this.path, this.inData);
    }
  },
};
</script>
<style lang="less" scoped>
.imgShow{
  .imgContainer{
    display: flex; /* 使用Flexbox布局 */
    align-items: center; /* 垂直居中 */
    cursor: pointer;
    img{
      max-width: 100%; /* 确保图片不会超过其容器 */
      height: auto; /* 保持图片原有比例 */
    }
    .imgName{
      margin-left: 5px;
    }
  }

}
</style>


